<template>
    <el-card class="box-card">
        <div class="card-desc-header">
            <span class="card-title">编辑功能</span>
        </div>
        <div class="card-view-body">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form ref="formRef" :rules="rules" :model="ruleForm" label-width="80px" size="small">
                        <el-form-item label="权限名称" prop="title">
                            <el-input v-model="ruleForm.title" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="规则" prop="route">
                            <el-input v-model="ruleForm.route" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="路由" prop="rule">
                            <el-input v-model="ruleForm.rule" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="图标" prop="icon">
                            <el-input v-model="ruleForm.icon" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="sort_id">
                            <el-input v-model="ruleForm.sort_id"  class="input-value"></el-input>
                        </el-form-item>    
                        <el-form-item label="类型" prop="is_menu">
                            <el-select placeholder="请选择类型" v-model="ruleForm.is_menu" class="value-select">
                                <el-option v-for="item in state" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <auth-button class="mx-24 my-3" @click="submitForm('ruleForm')" type="primary" size="small" text="提交" :route_name="'/sys/rule/createRule'"></auth-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>
<script setup>
import AuthButton from "../../components/AuthButton.vue"
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { getRuleDetail, createRule,saveRule } from "~/api/rule"
import { toast } from "~/composables/util"
const router = useRouter()
const route = useRoute()
const store = useStore()

const ruleForm = reactive({
    title: "",
    route: "",
    rule: "",
    icon: "",
    is_menu: 1,
    sort_id: 0,
    pid:0,
})
const rules = {
    title: [
        {
            required: true,
            message: '权限名称不能为空',
            trigger: 'blur'
        },
    ],
    is_menu: [
        {
            required: true,
            message: '类型不能为空',
            trigger: 'blur'
        },
    ]
}

const state = ref([
    {
    value: 1,
    label: '菜单',
},
{
    value: 2,
    label: '节点',
},
{
    value: 3,
    label: '接口',
},
])
const formRef = ref(null)
const id = ref(0)
const pid = ref(0)
// 获取数据
function getDetailData(pid,val) {
    ruleForm.pid = parseInt(pid);
    if(val == 0){
        id.value = val
    }else{
        id.value = val
        getRuleDetail(parseInt(val))
        .then(res => {
            if (res.code == 200) {
                // 直接赋值，不需要ruleForm.value
                Object.assign(ruleForm, res.data.rule_info);
            } else {
                toast(res.msg, 'error')
            }
         })
    }
    
}
//报错数据
function submitForm(){
    ruleForm.sort_id = parseInt(ruleForm.sort_id);
    if(id.value == 0){
        createRule(ruleForm)
            .then(res => {
                if (res.code == 200) {
                    toast(res.msg)
                    router.go(-1)
                } else {
                    toast(res.msg, 'error')
                }
        })
    }else{
        saveRule(ruleForm)
            .then(res => {
                if (res.code == 200) {
                    toast(res.msg)
                    router.go(-1)
                } else {
                    toast(res.msg, 'error')
                }
        })
    }
}
getDetailData(route.query.pid,route.query.id)
</script>
